<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slide View Vertical</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<link rel="stylesheet" type="text/css" href="css/slide-view.css" />
</head>

<body>
<style>
body {
    padding: 0;
    margin: 0;
    font-family: Helvetica, sans-serif, Arial;
}

#my-slide-view .item {
    padding-top: 150px;
    line-height: 2rem;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-perspective: 100px;
    -moz-perspective: 100px;
    -ms-perspective: 100px;
    -o-perspective: 100px;
    perspective: 100px;
}
#my-slide-view .item h2 {
    font-size: 32px;
    font-weight: lighter;
}
#my-slide-view .item a {
    color: #fff;
}

.tip1 {
    -webkit-transform: translate3d(0, 0, 50px);
    opacity: 0;
}
.tip1-show {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: all 0.5s ease-out;
}
</style>
<div class="ci-slide-view" id="my-slide-view">
    <ul class="content">
        <li class="item">
            <h2>Vertical Demo</h2></li>
        <li class="item">
            <p id="tip" class="tip1">Display by onShow()</p>
        </li>
        <li class="item">
            <p><a href="demo_h.html">See the horizontal demo</a></p>
        </li>
        <li class="item">
            <p>Powered by<br /><a href="http://weibo.com/iburning">@牛顿的菠萝</a></p></li>
        <li class="item">
            <p>Thanks!</p>
        </li>
    </ul>
</div>

<script src="js/slideView.js"></script>
<script>
window.addEventListener('load', main);

function main() {
    var tip = document.getElementById('tip');
    var slideView = new CISlideView();
    slideView.init({
        el: document.getElementById('my-slide-view'),
        direction: 'V',
        zoom: -15,
        isShowDots: true,
        // isDebug: true,
        onShow: function (index) {
            // console.log(index);
            if (1 == index) {
                tip.className = 'tip1-show';
            }
        },
        onHide: function (index) {
            if (1 == index) {
                tip.className = 'tip1';
            }
        }
    });

    window.addEventListener('orientationchange', function (evt) {
        slideView.render();
    });
}
</script>
</body>
</html>